<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
<meta charset="UTF-8" />
<title>【顺风车】 - 发布拼车信息</title>
<link rel="stylesheet" href="../../static/assets/css/amazeui.css" th:href="@{/assets/css/amazeui.min.css}" />
<link rel="stylesheet" href="../../static/assets/css/amaze.min.css" th:href="@{/assets/css/amaze.min.css}" />
<link rel="stylesheet" href="../../static/assets/css/common.min.css" th:href="@{/assets/css/common.min.css}" />
<link rel="stylesheet" href="../../static/assets/css/other.min.css" th:href="@{/assets/css/other.min.css}" />
<script th:inline="javascript">
	var ctx = [[${session.contextPath}]];
	var orderPrice = [[${orderPrice}]];
</script>
</head>
<body class="register-container">
	<div th:include="common/header::header"></div>

	<div class="amz-banner">
		<div class="amz-container" data-am-scrollspy="{animation: 'scale-up', repeat: false}">
			<div class="am-panel am-panel-default">
				<div class="am-panel-bd">
					<div class="header">
						<div class="am-g am-text-center">
							<h1>
								<span class="am-badge am-badge-secondary am-radius am-text-xl">
									<span class="am-icon-user"></span>
									&nbsp; 发布拼车信息
								</span>
							</h1>
						</div>
						<hr />
					</div>

					<form action="/front/save" th:action="@{/front/save}" method="post" class="am-form am-form-horizontal"
						data-am-validator="">
						<div class="am-form-group">
							<label class="am-u-md-2 am-form-label am-padding-0">出发城市：</label>
							<div class="am-u-md-3">
								<select class="am-form-field am-radius" id="startProvinces" name="startProvinces.provinceid" required="">
									<option value="">选择省</option>
									<option th:each="provinces : ${provincesList}" th:value="${provinces.provinceid}"
										th:text="${provinces.province}">provinces</option>
								</select>
							</div>
							<div class="am-u-md-3" id="startCitiesDiv" style="display: none;">
								<select class="am-form-field am-radius" id="startCities" name="startCities.cityid" required="">
									<option value="">选择市</option>
								</select>
							</div>
							<div class="am-u-md-3 am-u-end" id="startAddressDiv" style="display: none;">
								<input type="text" class="am-form-field am-radius" id="startAddress" name="startAddress" size="20" required="" />
								<div id="searchResultPanel" style="border: 1px solid #C0C0C0; height: auto; display: none;"></div>
							</div>
						</div>
						<div class="am-form-group">
							<label class="am-u-md-2 am-form-label am-padding-0">到达城市：</label>
							<div class="am-u-md-3">
								<select class="am-form-field am-radius" id="endProvinces" name="stopProvinces.provinceid" required="">
									<option value="">选择省</option>
									<option th:each="provinces : ${provincesList}" th:value="${provinces.provinceid}"
										th:text="${provinces.province}">provinces</option>
								</select>
							</div>
							<div class="am-u-md-3" id="endCitiesDiv" style="display: none;">
								<select class="am-form-field am-radius" id="endCities" name="stopCities.cityid" required="">
									<option value="">选择市</option>
								</select>
							</div>
							<div class="am-u-md-3 am-u-end" id="stopAddressDiv" style="display: none;">
								<input type="text" class="am-form-field am-radius" id="stopAddress" name="stopAddress" size="20" required="" />
								<div id="searchResultPanel" style="border: 1px solid #C0C0C0; height: auto; display: none;"></div>
							</div>
						</div>
						<div class="am-form-group">
							<label class="am-u-md-2 am-form-label am-padding-0">出发日期：</label>
							<div class="am-u-md-3 am-u-end">
								<input type="text" class="am-form-field am-radius" name="goDate" placeholder=" 出发日期" required=""
									onclick="laydate({istime:true,istime:false,format:'YYYY-MM-DD',min:laydate.now()})" />
							</div>
						</div>
						<div class="am-form-group">
							<label class="am-u-md-2 am-form-label am-padding-0">出发时间：</label>
							<div class="am-u-md-3">
								<div class="am-input-group">
									<select class="am-form-field am-radius" id="endCities" name="goHH" required="">
										<option th:each="hh : ${hhs}" th:value="${hh}" th:text="${hh}">hh</option>
									</select>
									<span class="am-input-group-label">点</span>
								</div>
							</div>
							<div class="am-u-md-3 am-u-end">
								<div class="am-input-group">
									<select class="am-form-field am-radius" id="endCities" name="goMM" required="">
										<option th:each="mm : ${mms}" th:value="${mm}" th:text="${mm}">mm</option>
									</select>
									<span class="am-input-group-label">分</span>
								</div>
							</div>
						</div>
						<div class="am-form-group" sec:authorize="${hasAnyAuthority(2)}">
							<label class="am-u-md-2 am-form-label am-padding-0">提供座位数：</label>
							<div class="am-u-md-3 am-u-end">
								<input type="number" class="am-form-field am-radius" name="seatNumber" placeholder=" 座位数" required="" />
							</div>
						</div>
						<div class="am-form-group" sec:authorize="${hasAnyAuthority(1)}">
							<label class="am-u-md-2 am-form-label am-padding-0">乘车人数：</label>
							<div class="am-u-md-3 am-u-end">
								<input type="number" class="am-form-field am-radius" name="rideNumber" placeholder=" 乘车人数" required="" />
							</div>
						</div>
						<div class="am-form-group">
							<label class="am-u-md-2 am-form-label am-padding-0">价格：</label>
							<div class="am-u-md-3">
								<input type="number" class="am-form-field am-radius" name="price1" placeholder=" 单价" required="" />
							</div>
							<div class="am-u-md-6 am-u-end">
								<p class="am-text-middle am-text-xs" id="price1" style="display: none;">
									<strong>总距离：</strong>
									<small class="am-text-danger">
										<strong id="distance"></strong>
									</small>
									<strong>，耗时：</strong>
									<small class="am-text-danger">
										<strong id="duration"></strong>
									</small>
									<strong>，建议拼车价格：</strong>
									<small class="am-text-danger">
										<strong id="money"></strong>
									</small>
								</p>
							</div>
						</div>
						<div class="am-form-group" th:if="false">
							<label class="am-u-md-2 am-form-label am-padding-0">不拼车价格：</label>
							<div class="am-u-md-3">
								<input type="number" class="am-form-field am-radius" name="price2" placeholder=" 单价" />
							</div>
							<div class="am-u-md-6 am-u-end">
								<p class="am-text-middle am-text-xs" id="price2" style="display: none;">
									<strong>总距离：</strong>
									<small class="am-text-danger">
										<strong id="distance"></strong>
									</small>
									<strong>，耗时：</strong>
									<small class="am-text-danger">
										<strong id="duration"></strong>
									</small>
									<strong>，建议不拼车价格：</strong>
									<small class="am-text-danger">
										<strong id="money"></strong>
									</small>
								</p>
							</div>
						</div>
						<div class="am-form-group">
							<label class="am-u-md-2 am-form-label am-padding-0">其它说明：</label>
							<div class="am-u-md-8 am-u-end">
								<textarea class="" rows="5" name="other"></textarea>
							</div>
						</div>
						<div class="am-form-group">
							<div class="am-u-md-8 am-u-md-offset-2">
								<button type="submit" class="am-btn am-btn-secondary am-btn-block">发布</button>
							</div>
						</div>
					</form>

				</div>
			</div>
		</div>
	</div>

	<div th:include="common/footer::footer"></div>

	<script src="../../static/assets/js/jquery-2.1.0.js" charset="utf-8" th:src="@{/assets/js/jquery-2.1.0.js}"></script>
	<script src="../../static/assets/js/amazeui.js" charset="utf-8" th:src="@{/assets/js/amazeui.js}"></script>
	<script src="../../static/assets/js/core.js" charset="utf-8" th:src="@{/assets/js/core.js}"></script>
	<script src="../../static/assets/laydate/laydate.js" charset="utf-8" th:src="@{/assets/laydate/laydate.js}"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
</body>
<script type="text/javascript">
	laydate.skin('danlan');

	var ac = new BMap.Autocomplete({
		"input" : "startAddress"
	});
	var startAddress;
	ac.addEventListener("onconfirm", function(e) {
		var _value = e.item.value;
		startAddress = _value.province + _value.city + _value.district + _value.street + _value.business;
		search();
	});

	var stopAddress;
	var ac2 = new BMap.Autocomplete({
		"input" : "stopAddress"
	});
	ac2.addEventListener("onconfirm", function(e) {
		var _value = e.item.value;
		stopAddress = _value.province + _value.city + _value.district + _value.street + _value.business;
		search();
	});

	var searchComplete = function(results) {
		if (transit.getStatus() != BMAP_STATUS_SUCCESS) {
			return;
		}
		var plan = results.getPlan(0);
		var distance = plan.getDistance(true);
		var duration = plan.getDuration(true);
		var km = distance.substring(0, distance.length - 2)
		var money = Math.round(km * orderPrice);

		$("#distance").html(distance);
		$("#duration").html(duration);
		$("#money").html(money);
		$("#price1").show();
		//$("#price2").show();
	}
	var transit = new BMap.DrivingRoute("北京市", {
		onSearchComplete : searchComplete
	});
	var search = function() {
		if (stopAddress == undefined || startAddress == undefined) {
			return;
		}
		console.log(stopAddress);
		console.log(startAddress);
		transit.search(startAddress, stopAddress);
	}

	$("#startProvinces").cascade({
		url : ctx+"/front/cities/",
		optionsText : 'city',
		optionsValue : 'cityid',
		value : '#startCities',
		callback : function(jsons) {
			$("#startAddress").val("");
			if (jsons.length == 0) {
				$("#startCitiesDiv").hide();
				$("#startAddressDiv").hide();
			} else {
				$("#startCitiesDiv").show();
				$("#startAddressDiv").show();
				ac.setLocation(getLocation("#startProvinces", "#startCities"));
			}

		}
	});

	$("#endProvinces").cascade({
		url : ctx+"/front/cities/",
		optionsText : 'city',
		optionsValue : 'cityid',
		value : '#endCities',
		callback : function(jsons) {
			$("#stopAddress").val("");
			if (jsons.length == 0) {
				$("#endCitiesDiv").hide();
				$("#stopAddressDiv").hide();
			} else {
				$("#endCitiesDiv").show();
				$("#stopAddressDiv").show();
				ac2.setLocation(getLocation("#endProvinces", "#endCities"));
			}

		}
	});

	function getLocation(container1, container2) {
		var p = $(container1).find("option:selected").text();
		var c = $(container2).find("option:selected").text();
		var l = c;
		if (c === "县" || c === "市辖区") {
			l = p;
		}
		return l;
	}

	$("#startCities").change(function() {
		ac.setLocation(getLocation());
	});

	$("#endCities").change(function() {
		ac2.setLocation(getLocation());
	});
</script>
</html>
